import React, { Component } from 'react'
import Header from '../../components/header/header'
import {Form,Input,Button,Toast} from "antd-mobile"
import { reqlogin } from '../../http/api';
import "./login.less"

export default class login extends Component {
  constructor() {
    super();
    this.state = {
      user: {
        phone: "",
        password: ""
      }
    }
  }
  changeUser(e, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: e
      }
    })
  }
  login=()=> {
    reqlogin(this.state.user).then(res=>{
      if(res.data.code==200){
        Toast.show({
          icon:"success",
          content:res.data.msg
        })
        //存个☞
        sessionStorage.setItem("info",JSON.stringify(res.data.list))
        //跳转到首页
        this.props.history.push("/index/home")
      }
    })
  }
  render() {
    let {user} = this.state
    return (
      <div className='login'>
        <Header text="登录" register></Header>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' onChange={(e) => this.changeUser(e, "phone")} clearable />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' onChange={(e) => this.changeUser(e, "password")} clearable type='password' />
          </Form.Item>
          <Button block color="primary" size="large" onClick={this.login}>
            登录
          </Button>
        </Form>
      </div>
    )
  }
}
